<template>
	<div class="wrapper">
		<telegram />
		<div class="container">
			<div class="user-info">
				<div
					class="user-info-main"
					@click="router.push({ name: 'meInfo' })"
				>
					<div class="avatar">
						<yowin-img :src="vueState.pageInfo.avatar"></yowin-img>
					</div>
					<div class="info">
						<p class="info-name">
							{{ vueState.pageInfo.nickName || "Nickname" }}
						</p>
						<p class="info-code">
							{{ $t("Code") }} : {{ vueState.pageInfo.id }}
						</p>
					</div>
				</div>
			</div>
			<div class="balance">
				<div class="money-panel">
					<div class="money-panel-title">{{ $t("Balance") }}</div>
					<div class="money-panel-main">
						<div class="money">
							<div class="num">
								{{ vueState.countryInfo.currencySymbol
								}}{{ vueState.pageInfo.totalAmount }}
							</div>
						</div>
						<div class="sign">
							<span class="sign-item">≈ </span>
							<span class="coin-num">{{
								vueState.pageInfo.totalCoin
							}}</span>
						</div>
						<div
							v-if="vueState.pageStyle.showWithdraw"
							class="button"
							@click="goWithdraw"
						>
							{{ $t("Withdraw") }}
						</div>
					</div>
				</div>
				<div class="coin-panel" @click="goRecord">
					<div class="coin-panel-header">
						<div class="title">{{ $t("Coins") }}</div>
						<div class="arrow"></div>
					</div>
					<div class="coin-panel-main">
						<div class="item">
							<div class="title">{{ $t("Total") }}</div>
							<div class="coin-num">
								{{
									vueState.pageInfo.totalCoin +
									vueState.pageInfo.redeemedCoin
								}}
							</div>
						</div>
						<div class="item">
							<div class="title">{{ $t("Expend") }}</div>
							<div class="coin-num">
								{{ vueState.pageInfo.redeemedCoin }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="func panel">
				<ul class="func-list">
					<li class="func-list-item invite" @click="goInvite">
						<div class="icon"></div>
						<div class="title">{{ $t("Invite Friends") }}</div>
					</li>
					<li class="func-list-item win" @click="clickWinBtn">
						<div class="icon"></div>
						<div class="title">
							{{ $t("Win")
							}}<span
								>{{
									vueState.countryInfo.currencySymbol
								}}500</span
							>
						</div>
					</li>
					<li
						class="func-list-item earn"
						@click="clickEarnBtn"
						v-if="vueState.pageStyle.fulltask"
					>
						<div class="icon"></div>
						<div class="title">{{ $t("Make Money") }}</div>
					</li>
				</ul>
			</div>
			<div class="banner">
				<activity-banner></activity-banner>
			</div>
			<div class="operation panel">
				<ul class="operation-list">
					<li
						class="operation-list-item message"
						@click="goPage('message')"
					>
						<div class="main">
							<div class="icon"></div>
							<div class="title">{{ $t("Message") }}</div>
						</div>
						<div class="side-right">
							<div v-if="messageUnread" class="num">
								{{ messageUnread }}
							</div>
							<div class="arrow"></div>
						</div>
					</li>
					<li
						class="operation-list-item feedback"
						@click="goFeedback"
					>
						<div class="main">
							<div class="icon"></div>
							<div class="title">{{ $t("Feedback") }}</div>
						</div>
						<div class="side-right">
							<div class="arrow"></div>
						</div>
					</li>
          			<li
						class="operation-list-item settings"
						@click="goSetting"
					>
						<div class="main">
							<div class="icon"></div>
							<div class="title">{{ $t("Settings") }}</div>
						</div>
						<div class="side-right">
							<div class="arrow"></div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
import { reactive, toRefs, inject, getCurrentInstance, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { dealUrl } from "@@/utils/common.js";
import ActivityBanner from "../../components/Banner/index.vue";
import { useMeInfo } from "./components/useMeInfo.js";
import telegram from '../../components/Telegram/index.vue'


export default {
	name: "me",
	components: {
		ActivityBanner,
		telegram
	},
	setup(props) {
		const { proxy } = getCurrentInstance();
		const router = useRouter();
		const vueState = inject("vueState");
		const { state, initPage, needUpdate, feedbackUnread, messageUnread } =
			useMeInfo();
		const clickWinBtn = () => {
			window.trackEvent({ ev: 'clickWinButton' })
			if(vueState.countryInfo.country === 'IN'){
				window.SDKPostMessage({
					event:'h5_open_page',
					data:{
						target:'webview',
						data:{
							url:`https://s.oksp.in/v1/spin/tml?did=${vueState.did}&pid=7502&appk=7jV27NzKyWsGyb49XFU6wvbdmDrHgDu0`,
							title:'Fishing for gold',
							closable:true,
						}
					}
				})
			}else if(vueState.countryInfo.country === 'BR'){
				window.SDKPostMessage({
					event:'h5_open_page',
					data:{
						target:'webview',
						data:{
							url:`https://s.oksp.in/v1/spin/tml?did=${vueState.did}&pid=7510&appk=7jV27NzKyWsGyb49XFU6wvbdmDrHgDu0`,
							title:'Fishing for gold',
							closable:true,
						}
					}
				})
			}else{
				Toast(proxy.$t('The big cash event is coming'))
			}

		}

		const dealMakeMoneyUrl = () => {
			const unDealUrl = `http://101.251.197.220/RozRummy/index.html?opentype=Monopoly&did=${vueState.did}&source=MakeMoney&bundle=${vueState.bundle}&mode=GP`;
			return dealUrl(unDealUrl, "MakeMoney");
		};
		const clickEarnBtn = () => {
			window.trackEvent({ ev: 'clickMakeMoney' })
			if(vueState.countryInfo.country === 'IN'){
				window.SDKPostMessage({
					event:'h5_open_page',
					data:{
						target:'webview',
						data:{
							url:`https://s.oksp.in/v1/spin/tml?did=${vueState.did}&pid=7505&appk=7jV27NzKyWsGyb49XFU6wvbdmDrHgDu0`,
							title:'Fishing for gold',
							closable:true,
						}
					}
				})
			}else if(vueState.countryInfo.country === 'BR'){
				window.SDKPostMessage({
					event:'h5_open_page',
					data:{
						target:'webview',
						data:{
							url:`https://s.oksp.in/v1/spin/tml?did=${vueState.did}&pid=7513&appk=7jV27NzKyWsGyb49XFU6wvbdmDrHgDu0`,
							title:'Fishing for gold',
							closable:true,
						}
					}
				})
			}else{
				return
			}
		}

		const goFeedback = () => {
		if(vueState.pageInfo.feedbackInfo.list?.length){
          router.push({name:'feedbackRecord'})
      }else{
          window.trackEvent({ev:'clickFeedback'})
          router.push({name:'meFeedback'})
      }
		};
    const goSetting = () => {
			window.trackEvent({ev:'clickSettingsTab'})
      router.push({name:'meSettings'})
		};
		const goWithdraw = () => {
			window.trackEvent({ ev: "clickWithdrawButton" });
			router.push({ name: "withdraw" });
		};
		const goInvite = () => {
			router.push({ name: "invite" });
			window.trackEvent({ ev: "clickInviteButton" });
		};
		const goRecord = () => {
			window.trackEvent({ ev: "clickCoins" });
			router.push({ name: "record", params: { propsActive: 1 } });
		};
		const goPage = (page) => {
			switch (page) {
				case "files":
					window.trackEvent({ ev: "clickMyfiles" });
					window.SDKPostMessage({
						event: "h5_open_page",
						data: {
							target: "download",
						},
					});
					break;
				case "message":
					window.trackEvent({ ev: "clickMessageTab" });
					router.push({ name: "messageRecord" });
					break;
				case "settings":
					window.trackEvent({ ev: "clickSettingsTab" });
					router.push({ name: "meSettings" });
					break;
				case "feedback":
					if (vueState.pageInfo.feedbackInfo.list?.length) {
						router.push({ name: "feedbackRecord" });
					} else {
						window.trackEvent({ ev: "clickFeedback" });
						router.push({ name: "meFeedback" });
					}
					break;
				case "withdraw":
					window.trackEvent({ ev: "clickWithdrawButton" });
					router.push({ name: "withdraw" });
					break;
				case "invite":
					router.push({ name: "invite" });
					window.trackEvent({ ev: "clickInviteButton" });
					break;
				case "record":
					window.trackEvent({ ev: "clickCoins" });
					router.push({ name: "record", params: { propsActive: 1 } });
					break;
				default:
					break;
			}
		};
		onMounted(() => {
			// initLottie()
			// playMoneyLottie()
			if (vueState.pageInfo.timer) {
				return;
			} else {
				vueState.EventEmitter.immediately(
					"afterRegist",
					initPage,
					vueState.pageStatus.afterRegist
				);
			}
		});
		return {
			vueState,
			...toRefs(state),
			clickWinBtn,
			clickEarnBtn,
			goWithdraw,
			goInvite,
			goRecord,
			goFeedback,
			goSetting,
			router,
			messageUnread,
			goPage,
		};
	},
};
</script>
<style lang="less" scoped>
.wrapper {
	height: 100%;
	background-size: cover;
	background: url(../../assets/images/my-bg.png) no-repeat;
	background-size: 100%;
	background-color: white;
	.container {
		height: 100%;
		overflow-y: auto;
		padding: 0 0.16rem 0.22rem;

		.arrow {
			height: 0.24rem;
			width: 0.24rem;
			background: url(../../assets/images/right_arrow.png) no-repeat
				center;
			background-size: contain;
		}
		.panel {
			background-color: #ffffff;
			border-radius: 0.12rem;
		}
		.user-info {
			padding: 0.2rem 0 0.2rem 0.04rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-main {
				display: flex;
				flex: 1;
				align-items: center;
				.avatar {
					height: 0.64rem;
					width: 0.64rem;
					border: 0.02rem solid white;
					border-radius: 50%;
					margin-right: 0.12rem;
					img {
						display: block;
						height: 100%;
						width: 100%;
						border-radius: 50%;
					}
				}
				.info {
					flex: 1;
					width: 0;
					color: white;
					&-name {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						height: 0.32rem;
						font-size: 0.24rem;
						font-family: DM Sans, DM Sans-Medium;
						font-weight: 500;
						text-align: LEFT;
						line-height: 0.32rem;
						letter-spacing: 0rem;
					}
					&-code {
						font-size: 0.14rem;
						font-weight: 400;
						line-height: 0.24rem;
						font-family: DM Sans, DM Sans-Regular;
						text-align: LEFT;
						letter-spacing: 0rem;
					}
				}
			}
			&-side-right {
				margin-left: 0.1rem;
				.money {
					padding: 0.06rem 0.1rem;
					border: 0.02rem solid #dae2e9;
					border-radius: 0.45rem;
					color: #9c9da6;
					font-size: 0.16rem;
					font-weight: 500;
				}
			}
		}
		.balance {
			.money-panel {
				padding: 0.2rem 0.14rem 0.1rem 0.24rem;
				border-radius: 0.12rem;
				background: #ffffff no-repeat right center;
				background-size: 1.83rem 100%;
				text-align: center;
				width: 3.43rem;
				height: 2.2rem;
				box-shadow: 0rem 0.04rem 0.23rem 0rem rgba(245, 186, 79, 0.23);
				&-title {
					font-size: 0.14rem;
					font-weight: 400;
					height: 0.18rem;
					font-family: DM Sans, DM Sans-Regular;
					color: rgba(136, 136, 136, 0.72);
					text-shadow: 0rem 0.04rem 0.23rem 0rem
						rgba(245, 186, 79, 0.23);
				}
				&-main {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-top: 0.08rem;
					.money {
						display: flex;
						align-items: center;
					}
					.coin-num {
						background: url(../../assets/images/icon_coin.svg)
							no-repeat left center;
						padding-left: 0.24rem;
						background-size: 0.24rem 0.24rem;
						font-size: 0.2rem;
						font-weight: 700;
						line-height: 0.26rem;
					}
					.sign {
						font-size: 0.18rem;
						font-weight: 700;

						margin: 0.08rem 0.04rem;
					}
					.sign-item {
						color: #888;
					}
					.num {
						font-weight: 700;
						color: #222222 !important;
						font-size: 0.32rem;
						font-family: DM Sans, DM Sans-Bold;
						text-align: LEFT;
						letter-spacing: 0rem;
						text-shadow: 0rem 0.04rem 0.23rem 0rem
							rgba(245, 186, 79, 0.23);
					}
					.button {
						width: 3.03rem;
						height: 0.46rem;
						background-color: @theme-color;
						font-size: 0.16rem;
						font-weight: 500;
						color: white;
						text-align: center;
						line-height: 0.46rem;
						border-radius: 0.12rem;
						margin-top: 0.17rem;
						box-shadow: 0rem 0.04rem 0.23rem 0rem
								rgba(245, 186, 79, 0.23),
							0rem 0.08rem 0.16rem 0rem rgba(245, 181, 63, 0.5);
					}
				}
			}
			.coin-panel {
				border-radius: 0 0 0.12rem 0.12rem;
				margin-top: 0.2rem;
				border-radius: 0.12rem;
				width: 3.43rem;
				height: 1.16rem;
				background: #ffffff;
				box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(245, 186, 79, 0.11),
					0rem 0.08rem 0.16rem 0rem rgba(10, 36, 99, 0.02);
				&-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0.08rem 0.1rem 0.08rem 0.16rem;
					.title {
						font-size: 0.16rem;
						font-weight: 500;
						color: #121314;
						line-height: 0.28rem;
					}
				}
				&-main {
					display: flex;
					padding: 0 0.24rem 0.14rem;
					.item {
						flex-basis: 50%;
						border-right: 0.01rem solid #ededef;
						&:last-child {
							padding-left: 0.32rem;
							border-right: none;
						}
						.title {
							font-size: 0.14rem;
							font-weight: 400;
							color: #707177;
							line-height: 0.24rem;
							margin-bottom: 0.1rem;
						}
						.coin-num {
							background: url(../../assets/images/icon_coin.svg)
								no-repeat left center;
							background-size: 0.24rem 0.24rem;
							padding-left: 0.26rem;
							font-size: 0.24rem;
							font-weight: 700;
						}
					}
				}
			}
		}
		.func {
			margin-top: 0.24rem;
			padding: 0.22rem 0.12rem 0.14rem;
			width: 3.43rem;
			height: 1.06rem;
			background: #ffffff;
			border-radius: 0.12rem;
			&.panel {
				box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(245, 186, 79, 0.11),
					0rem 0.08rem 0.16rem 0rem rgba(10, 36, 99, 0.02);
			}
			&-list {
				display: flex;
				&-item {
					flex-basis: 33%;
					&.invite {
						.icon {
							width: 0.58rem;
							background: url(../../assets/images/me_index_invite.svg)
								no-repeat center;
							background-size: contain;
							animation: scale 1s infinite ease-in-out;
						}
					}
					&.win {
						.icon {
							background: url(https://cdn.yowin.mobi/pub/cr/595.1643009710.gif)
								no-repeat center;
							background-size: contain;
						}
					}
					&.earn {
						.icon {
							background: url(https://cdn.yowin.mobi/pub/cr/596.1643009746.gif)
								no-repeat center;
							background-size: contain;
						}
					}
					.icon {
						height: 0.4rem;
						width: 0.4rem;
						margin: 0 auto;
					}
					.title {
						font-size: 0.14rem;
						font-weight: 500;
						color: #121314;
						// line-height: .24rem;
						text-align: center;
						margin-top: 0.06rem;
						& > span {
							color: @theme-color;
						}
					}
				}
			}
		}
		.banner {
			margin-top: 0.2rem;
		}
		.operation {
			margin-top: 0.24rem;
			padding: 0.04rem 0.16rem;
			box-shadow: 0px 4px 12px 0px rgba(245, 181, 63, 0.11);
			&-list {
				&-item {
					padding: 0.16rem 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 0.01rem solid #ededef;
					&:last-child {
						border-bottom: 0;
					}
					&.message {
						.icon {
							background: url(../../assets/images/icon_message.svg)
								no-repeat center;
							background-size: contain;
						}
					}
					&.feedback {
						.icon {
							background: url(../../assets/images/me_index_feedback.svg)
								no-repeat center;
							background-size: contain;
						}
					}
					&.files {
						.icon {
							background: url(../../assets/images/me_index_files.svg)
								no-repeat center;
							background-size: contain;
						}
					}
          &.settings{
            .icon{
                background: url(../../assets/images/icon_settings.svg) no-repeat center;
                background-size: contain;
            }
        }
					&.my-file {
						.icon {
							background: url(../../assets/images/me_index_file.png)
								no-repeat center;
							background-size: contain;
						}
						.download-num {
							font-size: 0.11rem;
							font-weight: 500;
							line-height: 0.18rem;
							color: white;
							background-color: #ff4750;
							border-radius: 50%;
							padding: 0 0.06rem;
						}
						.side-right {
							display: flex;
							align-items: center;
						}
					}
					.main {
						display: flex;
						align-items: center;
						.icon {
							height: 0.24rem;
							width: 0.24rem;
							margin-right: 0.16rem;
						}
						.title {
							font-size: 0.16rem;
							font-weight: 500;
							color: #121314;
							line-height: 0.28rem;
						}
					}
					.side-right{
                        display: flex;
                        align-items: center;
                        .point{
                            height: .06rem;
                            width: .06rem;
                            border-radius: 50%;
                            background-color: #FF4750;
                        }
                        .num{
                            font-size: .11rem;
                            font-weight: 500;
                            line-height: .18rem;
                            color: white;
                            background-color: #FF4750;
                            border-radius: 50%;
                            padding: 0 .06rem;
                        }
                    }

				}
			}
		}
	}
}
@keyframes scale {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
</style>
